<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

	</head>

	<body>
		<script type="text/javascript">
			if(window.DeviceMotionEvent) {
				window.addEventListener('devicemotion', deviceMotionHandler, false);
			} else {
				alert('本设备不支持devicemotion事件');
			}

			function deviceMotionHandler(eventData) {
				var acceleration = eventData.accelerationIncludingGravity,
					x, y, z;
				x = acceleration.x;
				y = acceleration.y;
				z = acceleration.z;
				document.getElementById("status").innerHTML = "x:" + x + "<br />y:" + y + "<br />z:" + z;
			}
			var SHAKE_THRESHOLD = 800;
			var last_update = 0;
			var x = y = z = last_x = last_y = last_z = 0;

			if(window.DeviceMotionEvent) {
				window.addEventListener('devicemotion', deviceMotionHandler, false);
			} else {
				alert('本设备不支持devicemotion事件');
			}

			function deviceMotionHandler(eventData) {
				var acceleration = eventData.accelerationIncludingGravity;
				var curTime = new Date().getTime();

				if((curTime - last_update) > 100) {
					var diffTime = curTime - last_update;
					last_update = curTime;
					x = acceleration.x;
					y = acceleration.y;
					z = acceleration.z;
					var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
					var status = document.getElementById("status");

					if(speed > SHAKE_THRESHOLD) {
						doResult();
					}
					last_x = x;
					last_y = y;
					last_z = z;
				}
			}
		</script>
	</body>

</html>